<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>vue2.0_computedOption 计算属性</title>
    <script src="../assets/js/vue.js"></script>
</head>
<body>
    <h1>vue2.0_computedOption 计算属性</h1>
<pre>
  computed 的作用主要是对原数据进行改造输出。改造输出：包括格式的编辑，大小写转换，顺序重排，添加符号……。

  一、格式化输出结果：

  我们先来做个读出价格的例子：我们读书的原始数据是price:100    但是我们输出给用户的样子是（￥100元）。


<textarea name="name" rows="25" cols="80">
    <h1>Computed Option 计算选项</h1>
    <hr>
    <div id="app">
        {{newPrice}}
    </div>

    <script type="text/javascript">
        var app=new Vue({
            el:'#app',
            data:{
                price:100
            },
            computed:{
                newPrice:function(){
                    return this.price='￥' + this.price + '元';
                }
            }
        })
    </script>

    现在输出的结果就是：￥100元。
</textarea>


二、用计算属性反转数组

例如：我们得到了一个新闻列表的数组，它的顺序是安装新闻时间的顺序正序排列的，也就是早反生的新闻排在前面。这是反人类的，我们需要给他反转。这时我们就可以用到我们的计算属性了。

没有排序的新闻列表，是安装日期正序排列的。


var newsList=[
    {title:'香港或就“装甲车被扣”事件追责 起诉涉事运输公司',date:'2017/3/10'},
    {title:'日本第二大准航母服役 外媒：针对中国潜艇',date:'2017/3/12'},
    {title:'中国北方将有明显雨雪降温天气 南方阴雨持续',date:'2017/3/13'},
    {title:'起底“最短命副市长”：不到40天落马，全家被查',date:'2017/3/23'},
];
我们希望输出的结果：

起底“最短命副市长”：不到40天落马，全家被查-2017/3/23
中国北方将有明显雨雪降温天气 南方阴雨持续-2017/3/13
日本第二大准航母服役 外媒：针对中国潜艇-2017/3/12
香港或就“装甲车被扣”事件追责 起诉涉事运输公司-2017/3/10
我们的在computed里的javascript代码：我们用js原生方法给数组作了反转。


computed:{
    reverseNews:function(){
        return this.newsList.reverse();
    }
}
总结：computed 属性是非常有用，在输出数据前可以轻松的改变数据。所以说这节课的代码必须要多敲几遍，加深印象。




</pre>

    <hr>
    <div id="app">
<p>{{newPrice}}</p>
<ul>
  <li v-for="item in reverList">{{item.title}}-{{item.date}}</li>
</ul>
    </div>
    <script>
    var newsList=[
        {title:'香港或就“装甲车被扣”事件追责 起诉涉事运输公司',date:'2017/3/10'},
        {title:'日本第二大准航母服役 外媒：针对中国潜艇',date:'2017/3/12'},
        {title:'中国北方将有明显雨雪降温天气 南方阴雨持续',date:'2017/3/13'},
        {title:'起底“最短命副市长”：不到40天落马，全家被查',date:'2017/3/23'},
    ];
        var app=new Vue({
            el:"#app",
            data:{
              price:100,
              newsList:newsList
            },
            computed:{
               newPrice:function(){
                return this.message="$ " + this.price + "元"
              },
              reverList:function(){
                return this.newsList.reverse();
              }
            }
        })
    </script>
</body>
</html>
